{% extends 'base' %}

{% block title %}
服务器{{ ser.name }}
{% endblock %}

{% set current_page = '服务器详情' %}

{% block content %}

<ul class="breadcrumb">
    <li><a href="/">网站后台</a><span class="divider">/</span></li>
    <li><a href="/server/list">服务器</a><span class="divider">/</span></li>
    <li class="active">{{ ser.name }}<span class="divider">/</span></li>
</ul>

    <div class="hero-unit">
        <code>服务器</code>
        <h1>{{ ser.name }}</h1>
        <br/>
        <p>{{ ser.description }}</p>
    </div>

    <div class="row-fluid">
        <p>信息更新时间：<b class="text-info">{{ last_time.datetime }}</b></p>
    </div>

    <div class="row-fluid">
        <div class="span4">
            <p><b>所在机房</b></p>
            <p><b class="text-info">{{ ser.location }}</b></p>
        </div>
        <div class="span4">
            <p><b>购进日期</b></p>
            <p><b class="text-error">{{ ser.date }}</b></p>
        </div>

    </div>

    <div class="row-fluid">
        <div class="span4">
            <h4>系统信息</h4>
            <p>主机名：<b>{{ ser.node }}</b></p>
            <p>操作系统：<b>{{ ser.system }}</b></p>
            <p>发行版(具体)：<b class="text-success">{{ ser.uname[2] }}</b></p>
            <p><b></b></p>
        </div>
        <div class="span4">
            <h4>处理器单元信息</h4>
            {% set cpu=ser.cpu_info %}
            <p>CPU型号：</p><p class="text-info"><b>{{ cpu.name }}</b></p>
            <p>核心数目：<b>{{ cpu.num_of_cores }}</b></p>
            <p>线程数<b>{{ cpu.num_of_processors }}</b></p>
        </div>
        <div class="span4">
            <h4>系统概况</h4>
            <p>进程数目：<b>{{ last_time.process_num }}</b></p>
        </div>
    </div>

    {% if last_time %}
    <div class="row-fluid">
        <div class="span4">
            <h3><b>网络</b></h3>
            {% set network = last_time.network %}

            <p>型号：</p><p><b class="text-info">{{ network.caption }}</b></p>
            <p>IP：<b class="text-success">{{ network.ip }}</b></p>
            <p>物理地址(mac)：<b class="text-info">{{ network.mac }}</b></p>

        </div>
        <div class="span4">
            <h4><b>磁盘状况</b></h4>
            {% set disk_stat = last_time.disk_stat %}
            <p>型号：</p><p><b class="text-info">{{ disk_stat.caption }}</b></p>
            <p>总空间：<b class="text-warning">{{ disk_stat.size|filesizeformat }}</b></p>
        </div>
        {% if last_time.partition %}

        <div class="span4">
            <h4>分区信息</h4>
            {% set partition=last_time.partition %}
            <table class="table table-bordered">
                <tr>
                    <th>分区</th>
                    <th>总容量</th>
                    <th>可用</th>
                </tr>
            {% for par in partition.keys() %}
                <tr>
                    <td>{{ par }}</td>
                    <td>{{ partition[par].total|filesizeformat }}</td>
                    <td>{{ partition[par].free|filesizeformat }}</td>
                </tr>
            {% endfor %}
            </table>
        </div>
        {% endif %}

    </div>
    {% endif %}


    <div class="row-fluid">
        <div class="span4">
            <h4><b>CPU使用率(%)</b></h4>
            <p><a href="/cpu/{{ oid }}/20/1/">更多</a></p>
            <br/><br/><br/>
            <canvas id="cpu-usage" class="can" data-type="Line" data-list="{{ cpu_usage_list }}"></canvas>
        </div>
        {% if last_time %}
        <div class="span4">
            <h4><b>内存使用率(%)</b></h4>
            <p><a href="/mem/{{ oid }}/20/1/">更多</a></p>
            <p>内存总量：<b class="text-success">{{ last_time.mem_info.mem_total|filesizeformat }}</b></p>
            <p>已使用：<b class="text-warning">{{ last_time.mem_info.mem_used|filesizeformat }}</b></p>
            <canvas id="mem-info" data-type="Line" data-list="{{ mem_info_list }}"></canvas>
        </div>
        {% endif %}
    </div>

    <div class="clearfix"><br/><br/><br/></div>

    {% include 'detail_server_footer' %}

{% endblock %}


{% block foot %}
    <script>
        $("canvas").each(function(){
			var $canvas = $(this);
			var ctx = this.getContext("2d");
            var data = {
                labels : ['最新',1,2,3,4,5,6,7,8,'较旧'],
                datasets : [
                    {
                        fillColor : "rgba(151,187,205,0.5)",
                        strokeColor : "rgba(151,187,205,1)",
                        pointColor : "rgba(151,187,205,1)",
                        pointStrokeColor : "#fff",
                        data : $canvas.data('list')
                    }
                ]};
			var evalString = "new Chart(ctx)." + $canvas.data("type") + "(data);";
			eval(evalString);
		});
    </script>
{% endblock %}